<!--  -->
<template>
  <div class="agent">
    <!-- 搜索 -->
    <div class="soso">
      <input type="text" v-model="name" placeholder="请输入会员昵称" />
      <button @click="hangleChange">搜索</button>
    </div>
    <!-- 增删改查 -->
    <el-table :data="list" style="width: 100%">
      <el-table-column label="订单ID" width="398">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column label="会员昵称" width="398">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="佣金金额" width="398">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.word }}</span>
        </template>
      </el-table-column>
      <el-table-column label="佣金产生时间" width="398">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.time }}</span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="20"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      currentPage1: 1,
      currentPage2: 1,
      currentPage3: 1,
      currentPage4: 1,
      name: "",
    };
  },
  //监听属性 类似于data概念
  computed: {
    ...mapState(["list"]),
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    ...mapActions(["huiList", "huisearch"]),

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // 搜索
    hangleChange() {
      this.huisearch({
        name: this.name,
      });
      console.log(this.huisearch);
      this.huiList();
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.huiList();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang="scss" scoped>
.agent {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .soso {
    margin: 10px 0;
    input {
      width: 200px;
      height: 30px;
    }
    button {
      width: 80px;
      height: 30px;
      background: #67adf6;
      color: #fff;
      border: none;
      border-radius: 5px;
    }
  }
}

.block {
  background: #fff;
  text-align: right;
  padding: 10px 20px;
}
</style>
